@extends('layouts.app')

@section('content')
<div class="container col-md-4" style="float:left">
    <canvas id="pieChart" width="300" height="300"></canvas>
</div>
<div class="container col-md-4" style="float:left">
    <canvas id="barChart" width="300" height="300"></canvas>
</div>
<div class="container col-md-4" style="float:left">
    <canvas id="Radarctx" width="300" height="300"></canvas>
</div>

@endsection
@section('cusstomJS')
<script src="{{ asset('js/chart.min.js') }}"></script>
<script>
    $(document).ready(function(){
        //饼状图
        var piectx=$("#pieChart");
        var myPieChart = new Chart(piectx, {
            type: 'pie',
            data:  {
                labels: ['未完成', '已完成'],
                datasets: [{
                    label: '# of Votes',
                    data: [{{ $todoCount }}, {{ $doneCount }}],
                    backgroundColor: [
                        'rgba(255, 99, 132, 0.2)',
                        'rgba(54, 162, 235, 0.2)'
                    ],
                    borderColor: [
                        'rgba(255, 99, 132, 1)',
                        'rgba(54, 162, 235, 1)'
                    ],
                    borderWidth: 1
                }]
            },
            options:  {
                scales: {
                    yAxes: [{
                        ticks: {
                            beginAtZero: true
                        }
                    }]
                }
            }
        });
        //柱状图
        var barctx=$("#barChart");
        var myBarChart = new Chart(barctx, {
            type: 'bar',
            data:  {
                labels: {!! json_encode($names) !!},
                datasets: [{
                    label: '# 所有任务',
                    data: {!! json_encode(TaskCountArray($projects)) !!},
                    backgroundColor: [
                        'rgba(255, 99, 132, 0.2)',
                        'rgba(54, 162, 235, 0.2)',
                        'rgba(255, 206, 86, 0.2)',
                        'rgba(75, 192, 192, 0.2)'
                    ],
                    borderColor: [
                        'rgba(255, 99, 132, 1)',
                        'rgba(54, 162, 235, 1)',
                        'rgba(255, 206, 86, 1)',
                        'rgba(75, 192, 192, 1)'
                    ],
                    borderWidth: 1
                }]
            }
        });
        //雷达图
        var Radarctx=$("#Radarctx");
        var data={

            labels: ["任务总数","未完成","已完成"],
            datasets: [
                <?php
                $i=0;
                foreach ($projects as $project):
                $name=$project->name;
                $total=$project->task()->count();
                $todoCount=$project->task()->where('completion',0)->count();
                $doneCount=$project->task()->where('completion',1)->count();
                     echo  "{";
                ?>
                    label:"<?php echo $name;?>",
                    backgroundColor:"{{ rand_color() }}",
                    borderColor:"{{ rand_color() }}",
                    pointBackgroundColor:"{{ rand_color() }}",
                    pointBorderColor:'#fff',
                    pointHoverBackgroundColor:"#fff",
                    pointHoverBColor:"{{ rand_color() }}",
                    data:[<?php echo $total.",".$todoCount.",".$doneCount;?>]
               <?php
                $i+1==$project->count()?print '}':print '},';
                $i++;
                endforeach;
                ?>

            ]
            
        };
        var myRadarChart = new Chart(Radarctx, {
            type: 'radar',
            data: data,
        });
    })
</script>
@endsection